<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="{$site_url}/mobile/" />
        <meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
        {$page_seo}
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <link type="text/css" href="{res file=css/global.css}" rel="stylesheet" />
        <!--
        <link type="text/css" href="{res file=css/mapstore.css}" rel="stylesheet" />
        -->
        <script type="text/javascript" src="{lib file=jslang.js}"></script>
        <script type="text/javascript" src="{lib file=jquery.js}" charset="utf-8"></script>
        <script type="text/javascript" src="{lib file=ecmall.js}" charset="utf-8"></script>
        <script type="text/javascript" src="{res file=js/mapstore.js}" charset="utf-8"></script> 
        <script type="text/javascript">
            //<!CDATA[
            var SITE_URL = "{$site_url}/mobile";
            var REAL_SITE_URL = "{$real_site_url}";
            var PRICE_FORMAT = '{$price_format}';
            //]]>
        </script>
        {$_head_tags}
    </head>
    <body>

        <style>
            body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"Microsoft YaHei";background: #f1f1f1;}
            .C:before, .C:after { content: "."; display: block; height: 0; visibility: hidden; }
            .C:after { clear: both; }
            .C { zoom: 1; }
            a{color: #888;text-decoration: none;}
            a:hover {color: #FF6000;}
            /*mapstore_address.html*/
            .mapaddr_header{height: 40px;width: 100%;background: #92c424;border-radius: 2px 2px 0 0;}
            .mapaddr_header a{margin: 0;text-align: center;font-size: 1.05rem;font-weight: normal;width:50%;display: block;float: left;color: #fff;line-height: 40px;text-decoration:none;}

            .shop_list {padding:8px 8px 40px 8px;background-color: #FFF;overflow-y: scroll;height: 100%;}
            .shop_list li { position: relative; display: block;border-bottom: 1px solid #E4E4E4;}
            .shop_list div.l { position: absolute; left: 90px; top: 10px; width: 230px; overflow: hidden; }
            .shop_list a { position: relative; display: block; padding: 10px; zoom: 1;}
            .shop_list img { float: left; border-radius: 4px; border: 1px solid #eee; margin-right: 20px; }
            .shop_list .title { font-size: 11pt; font-size: 1em;color: #333;}
            .shop_list .asset { font-size: 0.7em; margin-top: 5px; display: inline-block; }
            .shop_list .attr { font-size: 0.7em }
            .shop_list .type { padding: 0 5px; font-size: 0.9em ;border: 1px solid #59b170; background: #f8f8ee; color: #59b170; }
            .footer{width: 100%;height: 40px;position: fixed;z-index: 100;left: 0;bottom: 0;font-size: 11pt;}
            .footer a.l{display: block;width: 50%;height: 40px;text-align: center;line-height: 40px;float: left;color: #FF6000;position: absolute;top: -0;left: 0;background: #fff;border-radius: 6px 6px 0 0;border: 1px solid #FF6000;}
            .footer a.r{display: block;width: 50%;height: 40px;text-align: center;line-height: 40px;float: left;color: #FF6000;position: absolute;top: -0;right: 0;background: #fff;border-radius: 6px 6px 0 0;border: 1px solid #FF6000;}

            .filter_class{max-height: 80%;overflow: scroll;overflow-x: hidden;width: 100%;position: fixed;left: 0;top: 0;z-index: 121;background: #92C424;}
            .filter_class dl{width: 100%;text-align: center;display: block;border-bottom: 1px solid #fff;margin:0;padding: 0;}
            .filter_class dl a{padding:0 10px;line-height: 40px;color: #fff;font-size: 11pt;display: block;float: left;}
            .filter_class dl dt{width:20%;float: left;background:#FF6000;}
            .filter_class dl dd{width: 80%;float: right;margin: 0;padding: 0;}
            

            .filter_attr {max-height: 80%;overflow: scroll;overflow-x: hidden;width: 100%;position: fixed;left: 0;top: 0;z-index: 121;background: #92C424;}
            .filter_attr a {width: 100%;height: 40px;line-height: 40px;text-indent: 20px;font-size: 11pt;display: block;color: #fff;border-bottom: 1px solid #fff;}

            #filter_hidden{width:100%;height: 40px;line-height: 40px;text-align: center;display: block;}
        </style>
        <script>
            $(function () {
                /*-------筛选分类--------*/
                $(".footer a.l").click(function () {
                    $(".filter_class").css({display: "block"});
                    $(".filter_attr").css({display: "none"});
                });
                /*-------筛选排序--------*/
                $(".footer a.r").click(function () {
                    $(".filter_class").css({display: "none"});
                    $(".filter_attr").css({display: "block"});
                });
                $(".filter_attr #filter_hidden").click(function () {
                    $(this).parent().hide();
                });
                $(".filter_class #filter_hidden").click(function () {
                    $(this).parent().hide();
                });
            })

        </script>
        <div class="mapaddr_header">
            <a href="{url app=mapstore&act=address}" style="background:#FF6000;">{$lang.map}</a>
            <a href="{url app=mapstore}">{$lang.ambitus}</a>
        </div>
        <ul class="shop_list">
            <!--{foreach from=$stores item=store}-->
            <li><a href="{url app=store&id=$store.store_id}" class="C">
                    <img src="{$site_url}/{$store.store_logo}" width="60" height="60">
                        <div class="l">
                            <span class="title">{$store.store_name|escape}</span><br/>
                            <span class="asset">{$lang.great_ratio}{$store.praise_rate|escape}%</span><br/>
                            <span class="attr">{$lang.distance}：{$store.juli|escape}KM</span>
                        </div>
                </a>
                <!-- {/foreach} -->
            </li>
        </ul>

        <div class="footer">
            <a href="javascript:void(0)" class="l">{$lang.category}</a>
            <a href="javascript:void(0)" class="r">{$lang.sort_order}</a>
        </div>

        <div class="filter filter_class" style="display: none;" ectype='ul_scategory'>
            <!--{foreach from=$scategorys item=scategory name=fe_scategory}-->
            <dl class="C">
                <dt><a href="javascript:void(0)" id="{$scategory.id}">{$scategory.value|escape}</a></dt>
                <dd>
                    <!--{if $scategory.children}-->
                    <!--{foreach from=$scategory.children item=child}-->
                    <a href="javascript:void(0)" id="{$child.id}">{$child.value|escape}</a>
                    <!-- {/foreach} -->
                    <!--{else}-->
                    <a href="javascript:void(0)">{$lang.not_sub_category}</a>
                    <!--{/if}-->
                </dd>
            </dl>
            <!-- {/foreach} -->
            <span id="filter_hidden">{$lang.fold}</span>
        </div>
        <div class="filter filter_attr" style="display: none;" ectype='order_by'>
            <a href="javascript:void(0)" id="juli" >{$lang.nearest_store}</a>
            <a href="javascript:void(0)" id="add_time" >{$lang.newly_open}</a>
            <a href="javascript:void(0)" id="credit_value">{$lang.credit_store}</a>
            <span id="filter_hidden">{$lang.fold}</span>
        </div>


    </body>
</html>

